<!DOCTYPE html>
<html lang="zh">
	<head>
		<th:block th:include="include :: header('搜索自动补全')" />
	</head>
	<body class="gray-bg">
		<div class="wrapper wrapper-content animated fadeInRight">
			<div class="row">
				<div class="col-sm-6">
					<div class="ibox float-e-margins">
						<div class="ibox-title">
							<h5>搜索自动补全<small>https://github.com/lzwme/bootstrap-suggest-plugin</small></h5>
						</div>
						<div class="ibox-content">
							<p>展示下拉菜单按钮。</p>
							<div class="row">
								<div class="col-lg-6">
									<div class="input-group">
										<input type="text" class="form-control" id="suggest-demo-1">
										<div class="input-group-btn">
											<button type="button" class="btn btn-white dropdown-toggle"
												style="height: 31px" data-toggle="dropdown">
												<span class="caret"></span>
											</button>
											<ul class="dropdown-menu dropdown-menu-right" role="menu">
											</ul>
										</div>
									</div>
								</div>
							</div>

							<p>不展示下拉菜单按钮。</p>
							<div class="row">
								<div class="col-lg-6">
									<div class="input-group">
										<input type="text" class="form-control" id="suggest-demo-2">
										<div class="input-group-btn">
											<button type="button" class="btn btn-white dropdown-toggle"
												data-toggle="dropdown">
												<span class="caret"></span>
											</button>
											<ul class="dropdown-menu dropdown-menu-right" role="menu">
											</ul>
										</div>
									</div>
								</div>
							</div>

							<p>前端json中获取数据</p>
							<div class="row">
								<div class="col-lg-6">
									<div class="input-group">
										<input type="text" class="form-control" id="suggest-demo-3">
										<div class="input-group-btn">
											<button type="button" class="btn btn-white dropdown-toggle"
												style="height: 31px" data-toggle="dropdown">
												<span class="caret"></span>
											</button>
											<ul class="dropdown-menu dropdown-menu-right" role="menu">
											</ul>
										</div>
										<!-- /btn-group -->
									</div>
								</div>
							</div>

							<h3>百度搜索</h3>
							<p>支持逗号分隔多关键字</p>
							<div class="row">
								<div class="col-lg-6">
									<div class="input-group" style="width: 300px;">
										<input type="text" class="form-control" id="baidu">
										<div class="input-group-btn">
											<button type="button" class="btn btn-white dropdown-toggle"
												style="height: 31px" data-toggle="dropdown">
												<span class="caret"></span>
											</button>
											<ul class="dropdown-menu dropdown-menu-right" role="menu">
											</ul>
										</div>
										<!-- /btn-group -->
									</div>
								</div>
							</div>

							<h3>淘宝搜索</h3>
							<p>支持逗号分隔多关键字</p>
							<div class="row">
								<div class="col-lg-6">
									<div class="input-group" style="width: 400px;">
										<input type="text" class="form-control" id="taobao">
										<div class="input-group-btn">
											<button type="button" class="btn btn-white dropdown-toggle"
												style="height: 31px" data-toggle="dropdown">
												<span class="caret"></span>
											</button>
											<ul class="dropdown-menu dropdown-menu-right" role="menu">
											</ul>
										</div>
										<!-- /btn-group -->
									</div>
								</div>
							</div>
							<hr>
							<div class="form-group">
								<label class="font-noraml">相关参数详细信息</label>
								<div><a href="http://doc.ruoyi.vip/ruoyi/document/zjwd.html#bootstrap-suggest"
										target="_blank">http://doc.ruoyi.vip/ruoyi/document/zjwd.html#bootstrap-suggest</a>
								</div>
							</div>
						</div>
					</div>
				</div>

				<div class="col-sm-6">
					<div class="ibox float-e-margins">
						<div class="ibox-title">
							<h5>搜索自动补全<small>https://github.com/bassjobsen/Bootstrap-3-Typeahead</small></h5>
						</div>
						<div class="ibox-content">
							<p>通过数据属性的基本示例。</p>
							<div class="row">
								<div class="col-lg-6">
									<input type="text" placeholder="ruoyi..." data-provide="typeahead"
										data-source='["ruoyi 1","ruoyi 2","ruoyi 3"]' class="form-control" />
								</div>
							</div>
							<hr>

							<p>通过javascript的基本示例。</p>
							<div class="row">
								<div class="col-lg-6">
									<input type="text" placeholder="ruoyi..." class="form-control"
										id="typeahead-demo-1" />
								</div>
							</div>

							<hr>
							<p>通过javascript的复杂示例。</p>
							<div class="row">
								<div class="col-lg-6">
									<input type="text" placeholder="ruoyi..." class="form-control"
										id="typeahead-demo-2" />
								</div>
							</div>

							<hr>
							<p>后台url中获取简单数据</p>
							<div class="row">
								<div class="col-lg-6">
									<input type="text" placeholder="ruoyi..." class="form-control"
										id="typeahead-demo-3" />
								</div>
							</div>

							<hr>
							<div class="form-group">
								<label class="font-noraml">相关参数详细信息</label>
								<div><a href="http://doc.ruoyi.vip/ruoyi/document/zjwd.html#bootstrap-typeahead"
										target="_blank">http://doc.ruoyi.vip/ruoyi/document/zjwd.html#bootstrap-typeahead</a>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<th:block th:include="include :: footer" />
		<th:block th:include="include :: bootstrap-suggest-js" />
		<th:block th:include="include :: bootstrap-typeahead-js" />
		<script type="text/javascript">
			var testBsSuggest = $("#suggest-demo-1").bsSuggest({
				url: ctx + "demo/form/userModel",
				idField: "userId",
				keyField: "userName"
			}).on('onDataRequestSuccess', function(e, result) {
				console.log('onDataRequestSuccess: ', result);
			}).on('onSetSelectValue', function(e, keyword) {
				console.log('onSetSelectValue: ', keyword);
			}).on('onUnsetSelectValue', function(e) {
				console.log("onUnsetSelectValue");
			});

			var testBsSuggest = $("#suggest-demo-2").bsSuggest({
				url: ctx + "demo/form/userModel",
				showBtn: false,
				idField: "userId",
				keyField: "userName"
			}).on('onDataRequestSuccess', function(e, result) {
				console.log('onDataRequestSuccess: ', result);
			}).on('onSetSelectValue', function(e, keyword) {
				console.log('onSetSelectValue: ', keyword);
			}).on('onUnsetSelectValue', function(e) {
				console.log("onUnsetSelectValue");
			});

			//data 数据中获取
			var testdataBsSuggest = $("#suggest-demo-3").bsSuggest({
				indexId: 1,
				indexKey: 2,
				data: {
					'value': [{
							'userId': '1',
							'userCode': '1000001',
							'userName': '测试1',
							'userPhone': '15888888888'
						},
						{
							'userId': '2',
							'userCode': '1000002',
							'userName': '测试2',
							'userPhone': '15888888888'
						},
						{
							'userId': '3',
							'userCode': '1000003',
							'userName': '测试3',
							'userPhone': '15888888888'
						},
						{
							'userId': '4',
							'userCode': '1000004',
							'userName': '测试4',
							'userPhone': '15888888888'
						},
						{
							'userId': '5',
							'userCode': '1000005',
							'userName': '测试5',
							'userPhone': '15888888888'
						}
					],
					'defaults': 'http://ruoyi.vip'
				}
			});

			//百度搜索测试
			var baiduBsSuggest = $("#baidu").bsSuggest({
				allowNoKeyword: false, //是否允许无关键字时请求数据
				multiWord: true, //以分隔符号分割的多关键字支持
				separator: ",", //多关键字支持时的分隔符，默认为空格
				getDataMethod: "url", //获取数据的方式，总是从 URL 获取
				url: 'http://unionsug.baidu.com/su?p=3&t=' + (new Date()).getTime() + '&wd=',
				/*优先从url ajax 请求 json 帮助数据，注意最后一个参数为关键字请求参数*/
				jsonp: 'cb',
				/*如果从 url 获取数据，并且需要跨域，则该参数必须设置*/
				processData: function(json) { // url 获取数据时，对数据的处理，作为 getData 的回调函数
					var i, len, data = {
						value: []
					};
					if (!json || !json.s || json.s.length === 0) {
						return false;
					}

					console.log(json);
					len = json.s.length;

					jsonStr = "{'value':[";
					for (i = 0; i < len; i++) {
						data.value.push({
							word: json.s[i]
						});
					}
					data.defaults = 'baidu';

					//字符串转化为 js 对象
					return data;
				}
			});

			//淘宝搜索建议测试
			var taobaoBsSuggest = $("#taobao").bsSuggest({
				indexId: 2, // data.value 的第几个数据，作为input输入框的内容
				indexKey: 1, // data.value 的第几个数据，作为input输入框的内容
				allowNoKeyword: false, // 是否允许无关键字时请求数据
				hideOnSelect: true, // 鼠标从列表单击选择了值时，是否隐藏选择列表
				multiWord: true, // 以分隔符号分割的多关键字支持
				separator: ",", // 多关键字支持时的分隔符，默认为空格
				getDataMethod: "url", // 获取数据的方式，总是从 URL 获取
				effectiveFieldsAlias: {
					Id: "序号",
					Keyword: "关键字",
					Count: "数量"
				},
				showHeader: true,
				url: 'http://suggest.taobao.com/sug?code=utf-8&extras=1&q=',
				/*优先从url ajax 请求 json 帮助数据，注意最后一个参数为关键字请求参数*/
				jsonp: 'callback',
				/*如果从 url 获取数据，并且需要跨域，则该参数必须设置*/
				processData: function(json) { // url 获取数据时，对数据的处理，作为 getData 的回调函数
					var i, len, data = {
						value: []
					};

					if (!json || !json.result || json.result.length == 0) {
						return false;
					}

					console.log(json);
					len = json.result.length;

					for (i = 0; i < len; i++) {
						data.value.push({
							"Id": (i + 1),
							"Keyword": json.result[i][0],
							"Count": json.result[i][1]
						});
					}
					console.log(data);
					return data;
				}
			});

			$('#typeahead-demo-1').typeahead({
				source: ["ruoyi 1", "ruoyi 2", "ruoyi 3"]
			});

			$('#typeahead-demo-2').typeahead({
				source: [{
						"name": "Afghanistan",
						"code": "AF",
						"ccn0": "040"
					},
					{
						"name": "Land Islands",
						"code": "AX",
						"ccn0": "050"
					},
					{
						"name": "Albania",
						"code": "AL",
						"ccn0": "060"
					},
					{
						"name": "Algeria",
						"code": "DZ",
						"ccn0": "070"
					}
				]
			});

			$.get(ctx + "demo/form/collection", function(data) {
				$("#typeahead-demo-3").typeahead({
					source: data.value
				});
			}, 'json');
		</script>
	</body>
</html>
